import { type JSX, splitProps } from "solid-js";
import { cn } from "@/common/cn";

export type AvatarShape = "circle" | "square";
export type AvatarSize = "sm" | "md" | "lg";

type AvatarProps = Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "size"> & {
  shape?: AvatarShape | undefined;
  size?: AvatarSize | undefined;
};

/**
 * 基本事件示例
 */
export default function Avatar(props: AvatarProps) {
  const [p, rest] = splitProps(props, ["shape", "size", "class"]);
  const shapeClass = () => {
    switch (p.shape) {
      case "square":
        return "rounded-sm";
      default:
        return "rounded-full";
    }
  };

  const sizeClass = () => {
    switch (p.size) {
      case "sm":
        return "px-2 py-1 h-8  p-0 w-8  text-sm";
      case "lg":
        return "px-4 py-2 h-12 p-0 w-12 text-lg";
      default:
        return "px-4 py-2 h-10 p-0 w-10 text-sm";
    }
  };

  return (
    <img
      class={cn(
        "ring-2 ring-gray-200 border border-gray-300 flex items-center justify-center",
        sizeClass(),
        shapeClass(),
        p.class,
      )}
      alt="avatar"
      {...rest}
    />
  );
}
